import { Button } from '@/components/ui/button';
import { getGigaSkuAndProductId } from '@/lib/giga';
import { confirmMessage } from '@/lib/imperative';
import { useGigaStore } from '@/store/giga';
import { useGigaNotPersisStore } from '@/store/gigaNotPersist';
import { toast } from 'sonner';
export function AvaliableOperation() {
  const availableConcurrent = useGigaNotPersisStore((state) => state.availableConcurrent);
  const historyErrorAvailableTasks = useGigaStore((state) => state.historyErrorAvailableTasks);
  const gigaStoredispatch = useGigaStore((state) => state.dispatch);
  const dispatch = useGigaNotPersisStore((state) => state.dispatch);
  return (
    <div className="w-full">
      <div className="flex items-center mt-3 mr-3"></div>
      <div className="flex items-center gap-2 cursor-pointer">
        <span>库存采集信息({availableConcurrent.currentCategoryName}):</span>
        <span className="text-[hsl(142.1_76.2%_36.3%)]">{`(正在处理(${availableConcurrent.active.length})`}</span>
        /<span className="text-blue-500">{`待处理(${availableConcurrent.queue.length})`}</span>/
        {/* <span className="text-[hsl(142.1_76.2%_36.3%)]">{`已处理(${availableConcurrent.completed.length})`}</span> */}
        <span className="text-[hsl(142.1_76.2%_36.3%)]">{`成功(${availableConcurrent.success.length})`}</span>
        /<span className="text-red-500">{`失败(${availableConcurrent.fail.length})`}</span>/
        <span className="text-blue-500">{`总(${availableConcurrent.total.length})`}</span>/
        <span className="text-red-500">{`状态(${availableConcurrent.isStop ? '已暂停' : '运行中'}))`}</span>
      </div>
      <div className="flex items-center gap-2 mt-2 w-full">
        <Button
          size="sm"
          variant="destructive"
          onClick={() => {
            dispatch({
              type: 'resumeAvailableCollect',
            });
            toast.info('恢复任务', {
              position: 'top-right',
            });
          }}
          className="hover:bg-[#337AB7] bg-[#428BCA] mr-3"
        >
          恢复任务
        </Button>
        <Button
          size="sm"
          variant="destructive"
          onClick={() => {
            dispatch({
              type: 'resumeAvailableCollectWithError',
            });
            toast.info('恢复错误任务', {
              position: 'top-right',
            });
          }}
          className="hover:bg-[#337AB7] bg-[#428BCA] mr-3"
        >
          恢复错误任务
        </Button>
        <Button
          size="sm"
          variant="destructive"
          onClick={() => {
            try {
              const activeSkuInfo = availableConcurrent.active[0].task.taskInfo.skuIdInfo;
              const [sku, id] = getGigaSkuAndProductId(activeSkuInfo);
              window.open(
                `https://www.gigab2b.com/index.php?route=product/product&product_id=${id}`,
              );
            } catch (error) {
              console.log(error);
              toast.error('没有正在运行的库存采集任务');
            }
          }}
          className="hover:bg-[#337AB7] bg-[#428BCA] mr-3"
        >
          手动解验证码
        </Button>
        <Button
          size="sm"
          onClick={async () => {
            // console.log(historyErrorAvailableTasks);
            const isClear = await confirmMessage({
              title: '查看历史错误任务',
              description: historyErrorAvailableTasks.map((task) => {
                return <div>{`${task.categoryName}-${task.skuIdInfo}`}</div>;
              }),
              confirmText: '清空',
              cancelText: '不清空',
            });
            if (isClear) {
              gigaStoredispatch({
                type: 'update',
                update(draftState) {
                  draftState.historyErrorAvailableTasks = [];
                },
              });
            }
          }}
          className="hover:bg-[#337AB7] bg-[#428BCA] mr-3"
        >
          查看历史错误任务
        </Button>
        <Button
          size="sm"
          variant="destructive"
          onClick={() => {
            dispatch({
              type: 'stopAvailableCollect',
            });
            toast.info('暂停任务', {
              position: 'top-right',
            });
          }}
          className="hover:bg-destructive/90 bg-destructive ml-auto mr-3"
        >
          暂停任务
        </Button>
        <Button
          size="sm"
          variant="destructive"
          onClick={() => {
            dispatch({
              type: 'clearAvailableQueue',
            });
            toast.info('已清除待处理中的任务队列', {
              position: 'top-right',
            });
          }}
          className="hover:bg-destructive/90 bg-destructive mr-3"
        >
          清除待处理队列
        </Button>
        <Button
          size="sm"
          variant="destructive"
          onClick={() => {
            dispatch({
              type: 'clearAllQueue',
            });
            toast.info('已清除所有队列队列', {
              position: 'top-right',
            });
          }}
          className="hover:bg-destructive/90 bg-destructive mr-3"
        >
          清除所有队列
        </Button>
      </div>
    </div>
  );
}
